import React from 'react';
import { render } from 'react-dom';
import Progress from '../components/progress';
import { Link } from 'react-router-dom';
import Pubsub from 'pubsub-js';
import '../style/player.scss';

let duration = null;
class Player extends React.Component {
  constructor(props) {
    super(props)
    this.progressChangeHandler = this.progressChangeHandler.bind(this);
    this.volumeChangeHandler = this.volumeChangeHandler.bind(this);
    this.clickPlayOrPause = this.clickPlayOrPause.bind(this);
    this.clickPrev = this.clickPrev.bind(this);
    this.clickNext = this.clickNext.bind(this);
  }

  componentDidMount() {
    $('#player').bind($.jPlayer.event.timeupdate, (e) => {
      duration = e.jPlayer.status.duration;
        // 初始化 progress
        this.props.changeProgress(e.jPlayer.status.currentPercentAbsolute);
        // 初始化 volume
        this.props.changeVolume(e.jPlayer.options.volume * 100)
        //  初始化 leftTime
        this.props.leftTime(this.formatTime(duration * (1 - e.jPlayer.status.currentPercentAbsolute / 100)))

    });

  }

  componentWillUnMount() {
    $('#player').unbind($.jPlayer.event.timeupdate);
  }
  // 调节改变播放进度
  progressChangeHandler(progress) {
    $('#player').jPlayer(this.props.baseInfo.isPlay ? 'play' : 'pause', duration * progress);
  }
  // 调节改变音量
  volumeChangeHandler(progress) {
    $('#player').jPlayer('volume', progress);
  }

  // 点击播放或暂停
  clickPlayOrPause() {
    PubSub.publish('IS_PLAY');
  }

  // 点击上一曲
  clickPrev() {
    PubSub.publish('PREV_MUSIC');
  }

  // 点击下一区
  clickNext() {
    PubSub.publish('NEXT_MUSIC');
  }

  formatTime(time) {
    time = Math.floor(time);
    let minutes = Math.floor(time / 60);
    let seconds = (Math.floor(time % 60));
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    return `${minutes}:${seconds}`;
  }

  render() {
    return(
      <div className="container-player">
        <h1 className="caption">
          <Link to="/list">我的私人音乐坊 &gt;</Link>
        </h1>
        <div className="mt20 row">
          <div className="controll-wrapper">
            <h2 className="music-title">
              {this.props.musicItem.title}
            </h2>
            <h3 className="music-artist mt10">
              {this.props.musicItem.artist}
            </h3>
            <div className="row mt20">
              <div className="left-time -col-auto">-{this.props.baseInfo.leftTime}</div>
              <div className="volume-container">
                <i className="icon-volume rt" style={{
                  top: 5,
                  left: -5
                }}></i>
                <div className="volume-wrapper">
                <Progress
                  progress={this.props.baseInfo.volume}
                  onProgressChange={this.volumeChangeHandler}
                  barColor="#ff0000"
                 />
                </div>
              </div>
            </div>
            <div style={{
              height: 10,
              lineHeight: '10px',
              marginTop: '20px'
            }}>
              <Progress
                progress={this.props.baseInfo.progress}
                onProgressChange={this.progressChangeHandler}
                barColor='green'
              />
            </div>
            <div className="mt35 row">
              <div>
                <i onClick={this.clickPrev}
                   className="icon prev"></i>
                <i onClick={this.clickPlayOrPause}
                   className={`icon ml20 ${this.props.baseInfo.isPlay ? 'pause' : 'play'}`}></i>
                <i onClick={this.clickNext}
                   className="icon next ml20"></i>
              </div>
              <div className="-col-auto">
                <i className="icon repeat-cycle"></i>
              </div>
            </div>
          </div>
          <div className="-col-auto cover">
            <img
              src={this.props.musicItem.cover}
              alt={this.props.musicItem.title}
            />
          </div>
        </div>
      </div>
    )
  }
}

export default Player;
